<template>
    <div class="right">
        <div class="title">{{ activeIndex =='1'? '销售排名' : '访问排名' }}</div>
        <div class="item" v-for="(item,index) in (activeIndex =='1'? orderRank : userRank)">
            <div class="idx" :class="{ active : index<=2}">{{ item.no }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="count">{{ item.count }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import useEchartStore from '@/stores/echart'
const echartStore = useEchartStore();
const orderRank = computed(() => {
    return echartStore.echartData.orderRank
})
const userRank = computed(() => {
    return echartStore.echartData.userRank
})
const props = defineProps<{
    activeIndex: string
}>()
</script>

<style lang="scss" scoped>
.right {
    padding: 0 10px;

    .title {
        margin: 40px 0 10px;
        font-size: 14px;
    }

    .item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        font-size: 12px;
        color: #333;

        .idx {
            width: 20px;
            height: 20px;
            background: #fff;
            color: #333;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;

            &.active {
                color: #fff;
                background-color: #333;
            }
        }

        & .name {
            flex: 1;
            margin-left: 10px;
        }
    }
}
</style>